<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>VertiCard Gallery Page</title>

  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" />
  <link rel="stylesheet" href="css/bootstrap.min.css" />
  <!-- Magnific Popup core CSS file -->
  <link rel="stylesheet" href="css/magnific-popup.css" />
  <link rel="stylesheet" href="css/templatemo-style.css" />
</head>

<body>
  <div class="tm-page-container mx-auto">
    <header class="tm-header text-center">
      <h1 class="tm-title text-uppercase">水表在链</h1>
      <p class="tm-primary-color"><i>链上水表公证系统</i></p>
    </header>

    <div class="tm-section">
      <nav class="tm-nav">
        <ul>
          <li>
            <a href="/"><span class="tm-nav-deco"></span>首页</a>
          </li>
          <li>
            <a href="/gallery"><span class="tm-nav-deco"></span>合约</a>
          </li>
          <li>
            <a href="/contract"><span class="tm-nav-deco"></span>上链</a>
          </li>
          <li>
            <a href="/report"><span class="tm-nav-deco"></span>报告</a>
          </li>
          <li class="active">
            <a href="/sign"><span class="tm-nav-deco"></span>签名</a>
          </li>
        </ul>
      </nav>
      <div class="tm-content-container">
        <div class="tm-content tm-content-2">
          <table class="table table-striped table-bordered" th:if="${verify} eq null">
            <caption>委托单号有误，或检定报告未上链</caption>
          </table>
          <table class="table table-striped table-bordered" th:if="${verify} ne null">
            <caption>检定报告签名验证结果</caption>
            <thead>
            <tr>
              <th style="width: 30%">委托单号</th>
              <td><span th:text="${verify.batch.batchId}"></span></td>
            </tr>
            </thead>
            <tbody>
            <tr>
              <th>检定员</th>
              <td><span th:text="${verify.batch.verifierName}"></span></td>
            </tr>
            <tr>
              <th>报告名称</th>
              <td><span th:text="${verify.batch.reportName}"></span></td>
            </tr>
            <tr>
              <th>报告哈希</th>
              <td><span th:text="${verify.reportHash}" style="word-break: break-all"></span></td>
            </tr>
            <tr>
              <th>审核员地址</th>
              <td><span th:text="${verify.auditor}" style="word-break: break-all"></span></td>
            </tr>
            <tr>
              <th>审核员签名</th>
              <td><span th:text="${verify.auditorSigner}" style="word-break: break-all"></span></td>
            </tr>
            <tr>
              <th>审核员签名验证结果</th>
              <td><span th:text="${verify.auditorVerify}"></span></td>
            </tr>
            <tr>
              <th>检定中心地址</th>
              <td><span th:text="${verify.publisher}" style="word-break: break-all"></span></td>
            </tr>
            <tr>
              <th>检定中心签名</th>
              <td><span th:text="${verify.publisherSigner}" style="word-break: break-all"></span></td>
            </tr>
            <tr>
              <th>检定中心签名验证结果</th>
              <td><span th:text="${verify.publisherVerify}"></span></td>
            </tr>
            <tr>
              <th>仲裁机构地址</th>
              <td><span th:text="${verify.arbitrator}" style="word-break: break-all"></span></td>
            </tr>
            <tr>
              <th>仲裁机构签名</th>
              <td><span th:text="${verify.arbitratorSigner}" style="word-break: break-all"></span></td>
            </tr>
            <tr>
              <th>仲裁机构签名验证结果</th>
              <td><span th:text="${verify.arbitratorVerify}"></span></td>
            </tr>
            <tr>
              <th>合约地址</th>
              <td><textarea class="uneditable-textarea" th:text="${verify.batch.contractAddress}" id="contract_address" readonly style="word-break: break-all"></textarea><br><br>
              (请<button type="button" class="btn btn-mini btn-success" id="copyAddrButton" onclick="copyAddr('contract_address')">复制</button> 该合约地址, 在任一节点上验证检定报告的签名.)
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        <div class="tm-content-2">
          <p>
          本合约的检定报告验证结果. 确认完毕后您可以 <a href="javascript:window.close();">关闭窗体</a>.
          </p>
        </div>
      </div>
    </div>

    <footer>
      <span>Copyright &copy; 2020.Company name All rights reserved.</span>
    </footer>
  </div>

  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/jquery.magnific-popup.min.js"></script>
  <script>
    $(document).ready(function () {
      // Magnific Pop up
      // https://dimsemenov.com/plugins/magnific-popup/
      $('.tm-gallery').magnificPopup({
        delegate: 'a', // child items selector, by clicking on it popup will open
        type: 'image',
        gallery: {
          enabled: true
        },
      });
    });

    function copyAddr(txtid) {
      let cpt = document.getElementById(txtid);
      $(cpt).focus();
      $(cpt).select();
      document.execCommand('Copy', false, null);
    }
  </script>

</body>
</html>